<template>
  <div>
    <CartHeader />
    <div class="pay-body">
      <div class="pay-page-main">
        <div class="pay-page-top">
          <div class="page_address">
            <div class="page_address_top">
              <span class="address_left">收货地址 : </span>
              <!-- <span class="address_right"
                >抢购以最终支付成功为准，加购后请尽快付款，避免抢购失败</span
              > -->
            </div>
            <div class="page_address_down">
              <div>
                收货信息：aa 159****2179 广东 深圳市 宝安区 深圳市宝安国际机场
                黄田路1111
              </div>
              <!-- <div class="address_down" @click="open">
                <div class="address_centent">
                  <span class="iconfont icon-jia"></span>
                  <span class="address_title">添加新地址</span>
                </div>
              </div> -->
            </div>
          </div>
          <!--  -->
          <div class="detail-section">
            <div class="detail-header">商品及优惠券</div>
            <div
              class="goods-list"
              v-for="goods in cartList"
              :key="goods.product_id"
            >
              <div class="good-item">
                <div class="good-img">
                  <img :src="goods.images" alt="" />
                </div>
                <div class="good-name">
                  <a href="#"
                    ><span>{{ goods.name }}</span
                    ><span class="good-type">预付款</span></a
                  ><!---->
                </div>
                <div class="price-box">
                  <div class="good-price">
                    {{ goods.price_max }}元 x {{ goods.count }}
                  </div>
                  <div class="good-total">{{ goods.price_max }}元</div>
                  <!---->
                </div>
              </div>
            </div>
          </div>
          <!--  -->
          <div class="section">
            <!-- 配送方式 -->
            <div class="section_shipment">
              <div class="options-title">配送方式</div>
              <div class="options-body">包邮</div>
            </div>
            <!-- 发票 -->
            <div class="section_invoice">
              <div class="invoice_title">发票</div>
              <div class="invoice_body">
                <div class="invoice_body_left">电子普通发票</div>
                <div class="invoice_body_centent">个人</div>
                <div class="invoice_body_right">商品明细</div>
                <a href="#">修改 ></a>
              </div>
            </div>
          </div>
          <!-- 价格详细 -->
          <div class="count_detail">
            <div class="count_detail_left">
              <!-- 上边 -->
              <div class="count_detail_use">
                <a href="#" class="count_coupon">
                  <span class="iconfont icon-jia"></span>
                  <span class="coupon_use">使用优惠券</span>
                </a>
              </div>
              <div class="count_detail_use">
                <a href="#" class="count_coupon">
                  <span class="iconfont icon-jia"></span>
                  <span class="coupon_use">使用小米礼品卡</span>
                </a>
              </div>
            </div>
            <div class="count-detail_right">
              <div class="products">
                <div class="products_left">商品件数：</div>
                <div class="products_right">{{ cartList.length }}件</div>
              </div>
              <div class="products">
                <div class="products_left">商品总价：</div>
                <div class="products_right">{{ totalAllPrice }}元</div>
              </div>
              <div class="products">
                <div class="products_left">活动优惠：</div>
                <div class="products_right">-0元</div>
              </div>
              <div class="products">
                <div class="products_left">优惠券抵扣：</div>
                <div class="products_right">-0元</div>
              </div>
              <div class="products">
                <div class="products_left">运费：</div>
                <div class="products_right">0元</div>
              </div>
              <div class="products Amounts">
                <div class="products_left">应付总额：</div>
                <div class="products_right">
                  <em>{{ totalAllPrice }}</em
                  >元
                </div>
              </div>
            </div>
          </div>
          <!-- 结算按钮 -->
          <div class="Settlement">
            <div class="Settlement_right">
              <router-link to="/Shopcart" class="Settlement_return"
                >返回购物车</router-link
              >
              <router-link
                :to="{
                  path: '/PaySuccess',
                  query: {
                    total: totalAllPrice,
                  },
                }"
                class="Settlement_go"
                >去结算
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex"
import CartHeader from "@/components/CartHeader/index.vue"
export default {
  name: "Pay",

  data() {
    return {}
  },
  components: {
    CartHeader,
  },
  computed: {
    ...mapState({
      cartList: (state) => state.cart.cartList,
    }),
    totalAllPrice() {
      return this.cartList.reduce((pre, cur) => {
        return (pre += cur.selected ? cur.count * cur.price_max : 0)
      }, 0)
    },
  },
  mounted() {},
  methods: {
    // open() {
    //   this.$prompt('请输入地址', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
    //     inputErrorMessage: '邮箱格式不正确',
    //   })
    //     .then(({ value }) => {
    //       this.$message({
    //         type: 'success',
    //         message: '你的邮箱是: ' + value,
    //       })
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: 'info',
    //         message: '取消输入',
    //       })
    //     })
    // },
  },
}
</script>

<style lang="less" scoped>
.pay-body {
  width: 100%;
  padding: 50px 0;
  box-sizing: border-box;
  background-color: #f5f5f5;
  .pay-page-main {
    width: 1226px;
    margin: 0 auto;
    background-color: #fff;
    .pay-page-top {
      background-color: #fff;
      .page_address {
        padding: 30px 24px;
        .page_address_top {
          width: 1178px;
          height: 22px;
          margin-bottom: 20px;
          /* border: 1px solid red; */
          .address_left {
            font-size: 18px;
          }
        }
        .page_address_down {
          padding: 25px 0 30px 0;
          width: 1178px;
          // height: 200px;
          .address_down {
            width: 270px;
            height: 180px;
            margin: 0 17px 20px 0;
            border: 1px solid #e0e0e0;
            position: relative;
            .address_centent {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 70px;
              height: 59px;
              /* border: 1px solid red; */
              text-align: center;
              .iconfont {
                color: #d5d5d5;
                font-size: 30px;
                display: block;
              }
              .address_title {
                color: #b0b0b0;
              }
            }
          }
        }
      }
      .detail-section {
        position: relative;
        padding: 0 24px;
        // height: 111px;
        .detail-header {
          font-size: 18px;
          height: 40px;
          line-height: 40px;
        }
        .goods-list {
          width: 1178px;
          height: 71px;
          padding: 5px 0;
          box-sizing: border-box;
          /* border: 1px solid red; */
          .good-item {
            padding: 15px 0;
            height: 60px;
            line-height: 30px;
            box-sizing: border-box;
            display: flex;
            .good-img {
              width: 30px;
              height: 30px;
              margin-right: 10px;
              /* border: 1px solid red; */
              img {
                width: 30px;
                height: 30px;
              }
            }
            .good-name {
              width: 650px;
              .good-type {
                display: inline-block;
                padding: 0 10px;
                margin-left: 10px;
                height: 18px;
                font-size: 12px;
                color: #fff;
                line-height: 18px;
                text-align: center;
                background-color: #ff6701;
              }
            }
            .price-box {
              display: flex;
              .good-price {
                width: 150px;
                text-align: center;
              }
              .good-total {
                width: 190px;
                text-align: right;
                color: #ff6701;
              }
            }
          }
        }
      }
      .section {
        height: 193px;
        padding-left: 24px;
        /* border: 1px solid; */
        .section_shipment {
          width: 1178px;
          height: 97px;
          line-height: 47px;
          display: flex;
          padding: 25px 0;
          box-sizing: border-box;
          border-bottom: 1px solid #e0e0e0;
          border-top: 1px solid #e0e0e0;
          .options-title {
            width: 150px;
            height: 38px;
            font-size: 18px;
          }
          .options-body {
            font-size: 14px;
            width: 960px;
            height: 40px;
            color: #ff6700;
          }
        }
        .section_invoice {
          width: 1178px;
          height: 97px;
          line-height: 47px;
          display: flex;
          padding: 25px 0;
          box-sizing: border-box;
          .invoice_title {
            width: 150px;
            height: 38px;
            font-size: 18px;
          }
          .invoice_body {
            width: 960;
            display: flex;
            color: #ff6700;
            .invoice_body_left {
              margin-right: 14px;
            }
            .invoice_body_centent {
              margin-right: 14px;
            }
            .invoice_body_right {
              margin-right: 14px;
            }
            a {
              color: #ff6700;
            }
            a:hover {
              color: #ff6700;
              text-decoration: none;
            }
          }
        }
      }
      .count_detail {
        width: 1130px;
        height: 240px;
        margin: 0 48px;
        padding: 20px 0;
        box-sizing: border-box;
        position: relative;
        /* border: 1px solid red; */
        .count_detail_left {
          width: 130px;
          height: 100px;
          /* border: 1px solid red; */
          position: absolute;
          top: 20px;
          left: 0%;
          .count_detail_use {
            width: 130px;
            height: 50px;
            /* border: 1px solid green; */
            .count_coupon {
              height: 50px;
              line-height: 50px;
              display: block;
              text-decoration: none;
              .iconfont {
                margin-right: 10px;
                font-size: 22px;
                color: #ff6700;
                box-sizing: border-box;
              }
              .coupon_use {
                font-size: 14px;
                color: #757575;
              }
            }
            .count_coupon:hover {
              color: #ff6700;
            }
          }
        }
        .count-detail_right {
          width: 210px;
          height: 183px;
          /* border: 1px solid red; */
          position: absolute;
          top: 30px;
          left: 916px;
          .products {
            width: 206.75px;
            height: 28px;
            line-height: 28px;
            display: flex;
            text-align: right;
            .products_left {
              width: 126px;
              color: #757575;
              font-size: 14px;
            }
            .products_right {
              width: 80.75px;
              color: #ff6700;
              font-size: 14px;
            }
          }
          .Amounts {
            margin-top: 10px;
            .products_right {
              em {
                font-size: 24px;
              }
            }
          }
        }
      }
      /* 结算部分 */
      .Settlement {
        width: 1226px;
        height: 82px;
        padding: 20px 48px;
        box-sizing: border-box;
        border-top: 2px solid #f5f5f5;
        /* border: 1px solid red; */
        .Settlement_right {
          width: 380px;
          height: 40px;
          /* border: 1px solid red; */
          float: right;
          display: flex;
          .Settlement_return {
            width: 160px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            font-size: 14px;
            display: block;
            color: #b0b0b0;
            background-color: #fff;
            margin-left: 30px;
            text-decoration: none;
            border: 1px solid #b0b0b0;
          }
          .Settlement_go {
            display: block;
            width: 160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            background-color: #f25807;
            margin-left: 30px;
            color: #ffffff;
            text-decoration: none;
          }
        }
      }
    }
  }
}
//下拉菜单

.el-dropdown-link {
  cursor: pointer;
  color: #757575;
}
.el-icon-arrow-down {
  font-size: 12px;
}

/*  */
</style>
